@import "common.less";

/*全局变量*/
*{margin:0;padding:0}
ul,li{list-style-type:none;}
img {border:0;-ms-interpolation-mode: bicubic;max-width: 100%;}
input,textarea,button{outline: none;}
a,button{
  -webkit-tap-highlight-color: rgba(0,0,0,0.3);
}
html,body{height:100%;}
body{
  font: normal 100% PingFangSC-Light, Helvetica, "microsoft yahei", sans-serif;color:#000;position: relative; max-width:@rex-screen/@rem; margin:0 auto; overflow:hidden;
  a{color:#333;text-decoration:none;cursor: pointer;}
}

//公用样式
.body{min-height: 100%; height:100%;}
.disNone{display: none;}

.showAlert{max-width:@rex-screen/@rem; margin:0 auto;
  &:before{content:""; position: absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,31,72,0.87);}
  .area{
    position: absolute; top:0; left:0;
    background:url("../img/alert_bg.png") 50% 50%/contain no-repeat; width:1080/@rem; height:1509/@rem;
    &>div{position: relative; height:850/@rem; top:480/@rem;}
    i{
      &:before{content:""; display:block; width:81/@rem; height:75/@rem; background:url("../img/hand.png") 0 0/contain no-repeat;}
      position: absolute; top:350/@rem; left:280/@rem; z-index:3;
      &:after{content:"点击查看详情"; display:block; width:250/@rem; color:#fff; font-style:normal;}
    }
    .head{position:absolute; left:50%; top:-80/@rem; margin-left:-360/@rem; width:720/@rem; z-index:2;}
    .people{position: absolute; bottom:80/@rem; left:0; right:0;
      .job{text-align:center; font-size:41/@rem; color:#000; font-weight:bold; border-bottom: 2/@rem #fff solid; width:400/@rem; margin:10/@rem auto 20/@rem;
        line-height: 60/@rem; height:60/@rem; }
      .name{text-align:center; font-size:102/@rem; color:#00a6e4; font-weight:bold; position: relative;
        &:after{content:""; display:block; left:0; right:0; top:0; position:absolute; width:333/@rem; height:153/@rem; background:url("../img/namebg.png") 0 0/contain no-repeat; margin:0 auto;}
      }
    }
    .back{
      position: absolute; right:110/@rem; bottom:85/@rem; border:none;
      width:269/@rem; height:162/@rem; background:url("../img/alert_back.png") 0 0/contain no-repeat;
    }
  }

  .swiperArea{position:absolute; top: 50%; left: 0; right:0; margin-top:-643/@rem; height:1441/@rem;
    .close{position: absolute; width:113/@rem; height:120/@rem; background:url("../img/alert_close.png") 0 0/contain no-repeat; border:none; top:-30/@rem; right:85/@rem; z-index:99;}
    .swiper-container{height:1441/@rem; margin-top:-150/@rem;}
    .swiper-slide{background:url("../img/alert_sw_bg.png") 50% 100%/contain no-repeat; background-size: 863/@rem 1286/@rem;}
    .swiper-pagination{bottom:100/@rem;
      .swiper-pagination-bullet{width:25/@rem; height:25/@rem; background:#fff; border-radius:100%; margin:0 20/@rem;}
      .swiper-pagination-bullet-active{background:#fff;}
    }

    .content{width:750/@rem; margin:0 auto; padding-top:230/@rem; font-size:30/@rem; line-height:50/@rem;
      &.content1{
        .top{overflow: hidden; display:table; width:100%;}
        .head{width: 400/@rem; display: table-cell; vertical-align: middle;
          img{width:100%;}
        }
        ul{display: table-cell; width:320/@rem;
          li{padding:0 25/@rem;}
          .name{font-size:61/@rem; color:#009cd6; font-weight:bold; border-bottom: 2/@rem solid #fff; margin-bottom:5/@rem; line-height:90/@rem;}
          b{display: block;}
          .border{ border-bottom: 2/@rem solid #fff; margin-bottom:5/@rem;}
        }
        .job{clear: both; line-height:50/@rem; text-align:right; border-top: 2/@rem solid #fff;
          b{margin-top:15/@rem; display:block;}
        }
        .desc{clear: both; margin-top:150/@rem;}
      }
      &.content2{
        i{display:block; width:397/@rem; height:419/@rem; background:url("../img/content2.png") 0 0/contain no-repeat; margin:-222/@rem auto 40/@rem;}
        img{margin-top:-100/@rem; margin-bottom:20/@rem;}
      }
      &.content3{
        i{display:block; width:397/@rem; height:419/@rem; background:url("../img/content3.png") 0 0/contain no-repeat; margin:-222/@rem auto 40/@rem;}
        .title{color:#fff;line-height:80/@rem; font-size:57/@rem; text-align:center; font-weight:bold; margin-bottom:55/@rem; text-shadow: 0 5px 5px #ff9700;}
      }
      &.content4{
        i{display:block; width:397/@rem; height:419/@rem; background:url("../img/content4.png") 0 0/contain no-repeat; margin:-222/@rem auto 40/@rem;}
        .title{color:#fff;line-height:80/@rem; font-size:57/@rem; text-align:center; font-weight:bold; margin-bottom:55/@rem; text-shadow: 0 5px 5px #ff9700;}
      }
    }
  }
}

.animated {
  -webkit-animation-duration: .2s;
  animation-duration: .2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

.music{
  position: absolute; border:5/@rem #fff solid; width: 80/@rem; height: 80/@rem; right: 3%; top: 3%; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; background-size: 100%; opacity: 0.5; z-index: 4;
  background: url("../img/music2.png") 0 0/contain #000 no-repeat; z-index:9999;
  &.on{
    background: url("../img/music.png") 0 0/contain #000 no-repeat;
    animation: music 9.5s linear 0s normal none infinite;
    -webkit-animation: music 9.5s linear 0s normal none infinite;	/* Safari 和 Chrome */
  }
}
@keyframes music{
  0%{transform: rotate(0deg);}
  100%{transform: rotate(360deg);}
}
@-webkit-keyframes music{
  0%{transform: rotate(0deg);}
  100%{transform: rotate(360deg);}
}
